<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, computed, watch } from 'vue';
import * as echarts from 'echarts';
import { useHomepageStore } from '@/stores/homepage';
import { formatValueWithUnit } from "api/vepApi";

// 使用 homepage store
const homepageStore = useHomepageStore();

// 数据处理 - 添加默认值
// const rawData = computed<Array<{ name: string; value1: number; value2: number; value3: number }>>(() => {
//   console.log('原始数据', homepageStore.chartData);
//   return homepageStore.chartData?.bar02 || [];
// });
const rawData = computed<Array<{ name: string; value1: number; value2: number; value3: number }>>(() => {
  // 如果 homepageStore.chartData?.bar02 存在且为数组，则处理
  if (homepageStore.gepResults?.towns && Array.isArray(homepageStore.gepResults.towns)) {
    return homepageStore.gepResults.towns.map(item => {
      // 将字符串转换为数字
      const material = parseFloat(item.material) || 0;
      const regulation = parseFloat(item.regulation) || 0;
      const culture = parseFloat(item.culture) || 0;

      return {
        name: item.name,
        value1: material,      // material 对应 value1
        value2: regulation,    // regulation 对应 value2
        value3: culture        // culture 对应 value3
      };
    });
  }

  // 否则返回空数组
  return [];
});




// 定义一个引用，用于引用图表容器的 DOM 元素
const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;  // ECharts 实例

// 定义当前显示的数据起始索引
const startIndex = ref(0);
// 定时器引用
let intervalId: ReturnType<typeof setInterval> | null = null;

// 获取当前需要显示的5条数据
const displayData = computed(() => {
  if (!rawData.value || rawData.value.length === 0) {
    return [];
  }

  const data = rawData.value;
  const result = [];

  // 获取5条数据，如果超出数组长度则从头开始取（循环显示）
  for (let i = 0; i < 5; i++) {
    const index = (startIndex.value + i) % data.length;
    result.push(data[index]);
  }

  return result;
});

// 定义一个函数来渲染柱状图
const renderBarChart = (chartData: Array<{ name: string; value1: number; value2: number; value3: number }>) => {
  // 检查 chartRef 是否已经挂载到 DOM 上
  if (chartRef.value) {
    // 如果图表实例不存在，则初始化
    if (!chart) {
      chart = echarts.init(chartRef.value);
    }

    // 获取数据
    const data = chartData;

    // 如果没有数据，直接返回
    if (!data || data.length === 0) {
      return;
    }

    // 计算所有数据的最大值
    const maxDataValue = Math.max(
        ...data.flatMap(item => [item.value1, item.value2, item.value3])
    );
    const barWidth = '13%'; // 柱宽
    const barGap = '10%'; // 柱间距
    const distance = 1; // 标签距离
    // 定义三种颜色用于不同的系列
    const colors = ['#189cbb', '#83e0fc', '#23aecb'];

    // 定义图表的配置项
    const scale = 1;
    const option: echarts.EChartsOption = {
      // 背景颜色设置为深色背景
      // backgroundColor: '#0E2A43',
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params: echarts.TooltipComponentFormatterCallbackParams) => {
          // 确保 params 是数组类型
          const paramArray = Array.isArray(params) ? params : [params];

          const result = [];

          // 第一行显示类目名称
          result.push(`<div style="text-align: left; padding: 4px 8px; background: #fff; border-radius: 4px;">`);

          // 类目名称
          if (paramArray.length > 0) {
            result.push(`<strong>${ paramArray[0].name}</strong><br/>`);
          }

          // 每个系列的值
          paramArray.forEach((item: any) => {
            const value = item.value;
            const { formattedValue, unit } = formatValueWithUnit(value);

            result.push(`              ${item.marker} ${item.seriesName}:
              <strong>${formattedValue.toFixed(2)} ${unit}</strong><br/>
            `);
          });

          result.push(`</div>`);

          return result.join('');
        },
        backgroundColor: 'rgba(255,255,255,0.9)',
        borderColor: '#666',
        textStyle: {
          fontSize: 14
        }
      },
      legend: {
        data: ['生态物质产品', '生态调节产品', '生态文化产品'], // 图例数据
        align: 'left', // 图例对齐方式
        itemGap: 50, // 图例间隔
        right: '10%', // 图例位置
        top: '5%',
        icon: 'rect', // 图例图标形状
        itemWidth: 15 * scale, // 图例图形宽度
        itemHeight: 15 * scale, // 图例图形高度
        textStyle: {
          color: "#fff", // 图例文字颜色
          fontSize: 14 * scale // 图例文字大小
        },

      },
      grid: {
        left: '3%', // 网格左边距
        right: '4%', // 网格右边距
        bottom: '20px', // 网格下边距
        containLabel: true // 包含标签
      },
      xAxis: [{
        type: 'category', // 类目轴
        data: data.map(item => item.name), // 类目数据
        axisLabel: {
          padding: [15, 0, 0, 0], // 标签内边距
          color: "#fff", // 标签文字颜色
          fontSize: 14 * scale // 标签文字大小
        },
        axisTick: {
          inside: true, // 刻度线朝内
          length: 8 * scale, // 刻度线长度
          lineStyle: {
            color: colors[0] // 刻度线颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: colors[0] // 轴线颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(80,224,255,0.3)', // 分隔线颜色
            type: 'dashed' // 分隔线类型
          }
        }
      }],
      yAxis: [{
        // show: false,
        type: 'value', // 数值轴
        max: maxDataValue * 1.2, // 最大值
        axisLabel: {
          padding: [0, 15, 0, 0], // 标签内边距
          color: colors[0], // 标签文字颜色
          fontSize: 16 * scale,// 标签文字大小
          // 修改这里：将"万元"转换为"百万元"
          formatter: (value: number) => {
            return (value / 10000).toFixed(0); // 保留整数
          }
        },
        axisTick: {
          lineStyle: {
            color: colors[0] // 刻度线颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: colors[0] // 轴线颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(80,224,255,0.3)', // 分隔线颜色
            type: 'dashed' // 分隔线类型
          },
          show: false, // 不显示分隔线
        },
        // name: '百万元', // 轴名称
        nameTextStyle: {
          color: "#fff", // 轴名称颜色
          fontSize: 16 * scale, // 轴名称大小
          padding: [0, 0, 0, 0] // 轴名称内边距
        }
      }],
      series: [
        {
          name: '生态物质产品', // 系列名称
          type: 'bar', // 系列类型为柱状图
          stack: '生态物质产品', // 系列堆叠
          barWidth: barWidth, // 柱宽
          // barMinHeight: 25, // 设置最小高度为 5px
          barGap: barGap, // 柱间距
          label: {
            show: false, // 显示标签
            position: "top", // 标签位置
            distance: distance, // 标签距离
            formatter: function (params: any) {
              return params.data.value; // 标签内容
            },
            // color: "#dc0e0e", // 标签文字颜色
            fontSize: 14 * scale, // 标签文字大小
          },
          itemStyle: {
            color: 'rgba(94,218,255,0.4)', // 柱状图颜色
          },
          data: data.map(item => item.value1) // 数据
        },
        {
          name: '生态调节产品', // 系列名称
          type: 'bar', // 系列类型为柱状图
          stack: '生态调节产品', // 系列堆叠
          barWidth: barWidth, // 柱宽
          // barMinHeight: 25, // 设置最小高度为 5px
          barGap: barGap, // 柱间距
          label: {
            show: false, // 显示标签
            position: "top", // 标签位置
            distance: distance, // 标签距离
            formatter: function (params: any) {
              return params.data.value; // 标签内容
            },
            color: "#2e8686", // 标签文字颜色
            fontSize: 14 * scale, // 标签文字大小
          },
          itemStyle: {
            color: 'rgba(20,124,146,0.4)', // 柱状图颜色
          },
          data: data.map(item => item.value2) // 数据
        },
        {
          name: '生态文化产品', // 系列名称
          type: 'bar', // 系列类型为柱状图
          stack: '生态文化产品', // 系列堆叠
          barWidth: barWidth, // 柱宽
          // barMinHeight: 25, // 设置最小高度为 5px
          barGap: barGap, // 柱间距
          label: {
            show: false, // 显示标签
            position: "top", // 标签位置
            distance: distance, // 标签距离
            formatter: function (params: any) {
              return params.data.value; // 标签内容
            },
            // color: "#dc0e0e", // 标签文字颜色
            fontSize: 14 * scale, // 标签文字大小
          },
          itemStyle: {
            color: 'rgba(9,149,124,0.4)', // 柱状图颜色
          },
          data: data.map(item => item.value3) // 数据
        }
      ]
    };

    // 设置图表的配置项
    chart.setOption(option, { notMerge: true });
  }
};

// 更新显示数据的起始索引
const updateStartIndex = () => {
  if (!rawData.value || rawData.value.length <= 5) {
    return; // 如果数据不足5条或刚好5条，不需要轮换
  }

  startIndex.value = (startIndex.value + 1) % rawData.value.length;
};

// 开始轮播数据
const startDataRotation = () => {
  if (intervalId) {
    clearInterval(intervalId);
  }

  intervalId = setInterval(() => {
    updateStartIndex();
  }, 3000); // 每2秒更新一次
};

// 监听显示数据的变化，重新渲染图表
watch(displayData, (newData) => {
  if (newData.length > 0) {
    renderBarChart(newData);
  }
});

// 监听原始数据变化，重置起始索引并重新开始轮播
watch(rawData, () => {
  startIndex.value = 0;
  if (rawData.value && rawData.value.length > 0) {
    // 立即显示第一批数据
    renderBarChart(displayData.value);
    // 开始轮播
    startDataRotation();
  }
});

// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    console.log('初始化图表实例-bar02', rawData.value);
    if (rawData.value && rawData.value.length > 0) {
      renderBarChart(displayData.value);
      startDataRotation();
    }
  }, 200);
});

// 在组件卸载前清除定时器
onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
  // 在组件销毁前执行
  // 清理图表实例
  if (chart) {
    console.log('销毁图表实例-bar02');
    chart.dispose();
    chart = null;
  }
});
</script>

<template>
  <!-- 定义图表容器，使用 ref 绑定到 chartRef 引用 -->
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
